<template>
	<view class="content">
    <top-padding></top-padding>
    <view style="height: 24rpx"></view>
    <view class="index-top">
      <image src="/static/index/head.png" class="headImg" mode="aspectFit"></image>
      <view class="user-info">
        <view class="name">HelloSUSU</view>
        <view class="text">welcome to use Ncardfox</view>
      </view>
    </view>
    <view style="height: 32rpx"></view>
    <view class="content-swiper">
      <up-swiper :list="bannerList" keyName="value" @click="onBanner"  circular
                  height="150">
      </up-swiper>
    </view>
    <swiper class="swiper" :indicator-dots="true">
      <swiper-item>
        <view class="tab-box">
          <view class="tab-item" v-for="(item,index) in modeList" @click="toPage(item)" :key="index+'list'">
            <image class="image" :src="item.thumb"></image>
            <view style="padding-top: 10rpx">{{ item.text }}</view>
          </view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="tab-box">
          <view class="tab-item" v-for="(item,index) in list2" :key="index+'list'" @click="toPage(item)">
            <image class="image" :src="item.thumb"></image>
            <view style="padding-top: 10rpx">{{ item.text }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
	</view>
</template>

<script setup>
	import { ref ,onMounted ,reactive } from 'vue'
  import {tashaApiConstant} from "@/api/api.js";
  import TopPadding from "@/components/topPadding.vue";
  const bannerList = ref([])
  const getTashaApiConstant  = async ()=>{
    const res = await tashaApiConstant({code: 'banner'})
    bannerList.value = res.data
    console.log(res)
  }
  const onBanner = (item)=>{
    console.log(item)
  }
  onMounted(()=>{
    getTashaApiConstant()
  })
  const modeList = reactive([
    {
      thumb: "/static/index/modeIcon/rate.png",
      text: 'Rate',
      url: '/pages/toolIndex/index'
    },
    {
      thumb: "/static/index/modeIcon/turntable.png",
      text: 'Turntable',
      url: '/pages/dailyReward/prizeDraw/prizeDrawPage'
    },
    {
      thumb: "/static/index/modeIcon/InviteGifts.png",
      text: 'Invite Gifts'

    },
    {
      thumb: "/static/index/modeIcon/dailyRewards.png",
      text: 'Daily Rewards',
      url: '/pages/dailyReward/index'
    }
  ]);
  const modeList2 = reactive([
    {
      thumb: "/static/index/modeIcon/calculator.png",
      text: 'Calculator',
      url: '/pages/Calculator/index'
    },
    {
      thumb: "/static/index/modeIcon/blog.png",
      text: 'Blog',
      url: '/pages/blog/index'
    }
  ]);
  const toPage = (item) => {
    if (!item.url) return uni.$u.toast('Under Development')
    uni.navigateTo({
      url: item.url,
    })
  }
//
</script>

<style scoped lang="scss">
	.content {
		display: flex;
    box-sizing: border-box;
    padding: 0 24rpx;
		flex-direction: column;
		align-items: center;
    .index-top{
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: start;
      gap: 12rpx;
      .headImg{
        height: 100rpx;
        width: 100rpx;
      }
      .user-info{
        display: flex;
        flex-direction: column;
        gap: 6rpx;
        .name{
          font-family: Inter, Inter;
          font-weight: bold;
          font-size: 36rpx;
          color: #111D36;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .text{
          font-family: Inter, Inter;
          font-weight: 400;
          font-size: 24rpx;
          color: #7A8590;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .content-swiper {
      height: 300rpx;
      width: 100%;

      ::v-deep  img{
        border-radius: 10rpx !important;
        overflow: hidden !important;
      }
    }
    .swiper{
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 127rpx !important;
      .image{

      }
      .tab-box {
        margin-right: 100rpx;
        width: 100%;
        height: 127rpx;
        display: flex;
        position: relative;
        z-index: 5;
        .tab-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-family: Inter, Inter;
          font-weight: 400;
          font-size: 24rpx;
          color: #1A1A1A;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;

          .image {
            width: 88rpx;
            height: 88rpx;
          }
        }

      }
      ::v-deep .uni-swiper-wrapper {
        height: 127rpx !important;
        overflow: visible;
      }

      ::v-deep .uni-swiper-dots {

      }

      ::v-deep .uni-swiper-dots-horizontal {
        position: absolute;
        bottom: -34rpx !important;

        .uni-swiper-dot {
          width: 14rpx;
          height: 6rpx;
          background: #FFFFFF;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          transform: skewX(-20deg)
        }

        .uni-swiper-dot-active {
          width: 28rpx;
          height: 6rpx;
          background: #4D6DC3;
          border-radius: 0 0 0 0;
          transform: skewX(-20deg)
        }
      }
    }
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
